<template>
  <div class="content" v-if="userInfo">
    <!-- 顶部用户信息 -->
    <div class="userInfo">
      <div class="userInfo_top">
        <van-image round :src="userInfo.avatar" />
        <div class="right">
          <div class="userName">{{ userInfo.account }}</div>
          <van-icon name="edit" color="#16c2a3" />
        </div>
      </div>
      <van-row gutter="40">
        <van-col class="userInfo_item" span="6">
          <div>{{ userInfo.collectionNumber }}</div>
          <div class="text">收藏</div>
        </van-col>
        <van-col class="userInfo_item" span="6">
          <div>{{ userInfo.likeNumber }}</div>
          <div class="text">关注</div>
        </van-col>
        <van-col class="userInfo_item" span="6">
          <div>{{ userInfo.score }}</div>
          <div class="text">积分</div>
        </van-col>
        <van-col class="userInfo_item" span="6">
          <div>{{ userInfo.couponNumber }}</div>
          <div class="text">优惠券</div>
        </van-col>
      </van-row>
    </div>
    <!-- 功能模块 -->
    <div class="main">
      <div class="model">
        <div class="top">
          <h3>药品订单</h3>
          <div class="allOrders">全部订单 <van-icon name="arrow" /></div>
        </div>
        <van-grid>
          <van-grid-item
            icon="cart-o"
            text="待付款"
            :badge="
              userInfo.orderInfo.paidNumber === 0
                ? ''
                : userInfo.orderInfo.paidNumber
            "
          />
          <van-grid-item
            icon="shop-o"
            text="待发货"
            :badge="
              userInfo.orderInfo.receivedNumber === 0
                ? ''
                : userInfo.orderInfo.receivedNumber
            "
          />
          <van-grid-item
            icon="logistics"
            text="待收货"
            :badge="
              userInfo.orderInfo.shippedNumber === 0
                ? ''
                : userInfo.orderInfo.shippedNumber
            "
          />
          <van-grid-item
            icon="sign"
            text="已完成"
            :badge="
              userInfo.orderInfo.finishedNumber === 0
                ? ''
                : userInfo.orderInfo.finishedNumber
            "
          />
        </van-grid>
      </div>
      <div class="model">
        <h3>快捷工具</h3>
        <van-cell title="我的问诊" is-link icon="notes-o" @click="$router.push('/consult')" />
        <van-cell title="我的处方" is-link icon="records" />
        <van-cell title="家庭档案" is-link icon="friends-o" @click="$router.push('/my/patient')" />
        <van-cell title="地址管理" is-link icon="location-o" />
        <van-cell title="我的评价" is-link icon="edit" />
        <van-cell title="官方客服" is-link icon="service-o" />
        <van-cell title="设置" is-link icon="setting-o" />
      </div>
      <div class="outlogin">
        <button class="btn" @click="outLogin">退出登录</button>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { getUserInfo } from '@/api'
import { useStore } from 'vuex'
import { useRouter } from 'vue-router'
import { showConfirmDialog } from 'vant'
const store = useStore()
const router = useRouter()

// 获取用户信息
const userInfo = ref(null)
const fetchUserInfo = async () => {
  const { data } = await getUserInfo()
  userInfo.value = data
}
fetchUserInfo()

// 退出登录
const outLogin = () => {
  showConfirmDialog({
    title: '温馨提示',
    message: '您确认要退出优医问诊吗?'
  })
    .then(() => {
      // on confirm
      store.dispatch('login/outLogin')
      router.push('/login')
    })
    .catch(() => {
      // on cancel
    })
}
</script>

<style lang="scss" scoped>
.content {
  // 顶部用户信息
  .userInfo {
    padding: 70px 20px 0;
    background: linear-gradient(#99d9d2, #f6f7f9);
    .userInfo_top {
      display: flex;
      align-items: center;
      ::v-deep .van-image--round {
        margin-right: 20px;
        width: 140px;
        height: 140px;
      }
      .userName {
        margin-bottom: 16px;
        font-size: 36px;
      }
    }
    .userInfo_item {
      display: flex;
      flex-direction: column;
      justify-content: space-evenly;
      align-items: center;
      height: 80px;
      margin: 20px 0;
      .text {
        font-size: 22px;
        color: #979797;
      }
    }
  }
  // 功能模块
  .main {
    padding: 20px 20px 150px;
    .model {
      padding: 20px 20px 0;
      margin-bottom: 20px;
      border-radius: 12px;
      background-color: #fff;
      h3 {
        font-size: 32px;
      }
      &:nth-child(2) {
        margin-bottom: 50px;
        h3 {
          margin-bottom: 20px;
        }
      }
      .top {
        display: flex;
        justify-content: space-between;
        align-items: flex-end;
        .allOrders {
          font-size: 26px;
          color: #c3c3c5;
        }
      }
      ::v-deep .van-grid-item__content:after {
        border: 0;
      }
      [class*="van-hairline"]:after {
        border: 0;
      }
      ::v-deep .van-cell {
        padding: 20px 0;
        &::after {
          border: 0;
        }
        .van-cell__left-icon {
          margin-right: 20px;
          font-size: 28px;
        }
      }
    }
    .outlogin {
      display: flex;
      justify-content: center;
      .btn {
        border: 0;
        background-color: unset;
        font-size: 30px;
        color: #eb5757;
      }
    }
  }
}
</style>
